import { FormInstance } from 'element-plus'
import { nextTick, onMounted, reactive, ref } from 'vue'
import ApiAuthApi from '~/apis/auth/ApiAuthApi'
import { DialogType } from '~/types/Enum'
import { getTabelTree } from '~/views/auth/util/tree'

export const index = () => {
    const ruleFormRef = ref<FormInstance>()

    const conf = reactive<conf>({
        table: {
            expandall: true,
            source: [],
            data: []
        },
        dialog: {
            title: '',
            labelWidth: 100,
            rules: {
                title: [{ required: true, message: '请输入名称', trigger: 'blur' }],
                url: [{ required: true, message: '请输入地址', trigger: 'blur' }]
            },
            show: false,
            loading: false,
            type: DialogType.Insert,
            form: {} as any,
            formAs: {} as any,
            formDefault: {
                parentId: '0',
                title: '',
                url: '',
                sort: 0,
                type: 1
            },
            formAsDefault: {
                parentName: '根'
            },
            remove: {
                show: false,
                item: {} as any
            }
        }
    })

    const dialogShow = (type: DialogType, item?: any) => {
        const formEl = ruleFormRef.value
        if (formEl) formEl.resetFields()
        conf.dialog.type = type
        if (type === DialogType.Insert) {
            conf.dialog.title = '新增'
            conf.dialog.form = JSONUtil.cp(conf.dialog.formDefault)
            conf.dialog.formAs = JSONUtil.cp(conf.dialog.formAsDefault)
            conf.dialog.formAs.parentName = item ? item.title : '根'
            conf.dialog.form.parentId = item ? item.id : '0'
            conf.dialog.form.sort = item.children?.length + 1
        } else if (type === DialogType.Update) {
            conf.dialog.title = '编辑'
            conf.dialog.form = JSONUtil.cp(item)
            conf.dialog.formAs = JSONUtil.cp(conf.dialog.formAsDefault)

            let parent = conf.table.source.filter((el) => el.id === item.parentId)[0]
            conf.dialog.formAs.parentName = parent ? parent.title : '根'
        }
        conf.dialog.show = true
    }

    const dialogSubmit = async () => {
        const formEl = ruleFormRef.value
        if (!formEl) return
        conf.dialog.loading = true
        await formEl.validate(async (valid, fields) => {
            if (valid) {
                let form = JSONUtil.cp(conf.dialog.form)
                const res = await ApiAuthApi.save(form)
                if (res.status) {
                    await getTableData()
                    conf.dialog.show = false
                }
            }
            conf.dialog.loading = false
        })
    }

    const dialogSubmitRemove = async (id: string) => {
        const res = await ApiAuthApi.remove(id)
        if (res.status) {
            await getTableData()
        }
    }

    const getTableData = async () => {
        const res = await ApiAuthApi.list()
        if (res.status) {
            conf.table.source = JSONUtil.cp(res.data)
            conf.table.data = [getTabelTree(0, conf.table.source)]
        }
    }

    const onExpandall = () => {
        conf.table.expandall = !conf.table.expandall
        let dataT = JSONUtil.cp(conf.table.data)
        conf.table.data = []
        nextTick(() => {
            conf.table.data = dataT
        })
    }

    onMounted(async () => {
        getTableData()
    })

    return { conf, dialogSubmit, dialogShow, ruleFormRef, onExpandall, dialogSubmitRemove }
}

type conf = {
    table: {
        expandall: boolean
        source: any[]
        data: any[]
    }
    dialog: {
        title: string
        labelWidth: number
        rules: any
        type: DialogType
        show: boolean
        loading: boolean
        form: form
        formDefault: form
        formAs: formAs
        formAsDefault: formAs
        remove: {
            show: boolean
            item: form
        }
    }
}

type form = {
    parentId: string
    title: string
    url: string
    sort: number
    type: number
}

type formAs = {
    parentName: string
}
